import React, {useEffect, useState} from 'react';
import {observer} from "mobx-react";
import {Button, Flex, Tree} from 'antd';
import {CarryOutOutlined, FormOutlined} from '@ant-design/icons';
import Form from './Form';
import store from '../store';

export default observer(function () {

  function onSelect(selectedKeys, info) {
    console.log('selected', selectedKeys, info);
    if (info.node.id === store.category.id) {
      store.set('category', {})
    } else {
      store.set('category', info.node)
    }
  }

  return (
    <div>
      <Flex align="center" justify="space-between">
        <h2 style={{fontSize: 16, fontWeight: 500, marginBottom: 6}}>商品分类</h2>
        <div style={{paddingTop: 8}}>
          {
            store.category.id && (
              <Button type="link" onClick={() => store.showCategory()}>编辑</Button>
            )
          }
          <Button type="link" onClick={() => store.showCategory(true)}>新建分类</Button>
        </div>
      </Flex>
      {
        store.categories.length && (
          <Tree
            showLine
            defaultExpandAll
            onSelect={onSelect}
            fieldNames={{title: "name", key: "id", children: "children"}}
            treeData={store.categories}
          />
        )
      }

      {store.categoryVisible && <Form/>}
    </div>
  );
})